<%--
  Created by IntelliJ IDEA .
  User: Baggio
  Date: 2017-11-13
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>feesoul官网首页</title>
    <%@ include file="/common/include-core.jsp" %>
    <%@ include file="/common/include-web.jsp" %>
    <link rel="stylesheet" type="text/css" href="/static/css/index/index.css"/>
    <link rel="stylesheet" href="/static/css/index/jquery.fullPage.css">
    <script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="/static/js/web/index/jquery.fullPage.js"></script>
    <script type="text/javascript" src="/static/js/web/index/index.js"></script>
    <script type="text/javascript" src="/static/js/web/index/prefixfree.min.js"></script>

<%--    <style class="cp-pen-styles">body {
        background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);
        background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);
        background-attachment: fixed;
        overflow: hidden;
    }

    @keyframes rotate {
        0% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
        }
        100% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
        }
    }
    .stars {

        transform: perspective(500px);
        transform-style: preserve-3d;
/*        position: absolute;*/
        position:relative;
        bottom: 0;
        perspective-origin: 50% 100%;
        left: 50%;
       animation: rotate 90s infinite linear;
    }

    .star {
        width: 2px;
        height: 2px;
        background: #F7F7B6;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0 -300px;
        transform: translate3d(0, 0, -300px);
        backface-visibility: hidden;
    }
    </style>--%>
</head>
<body>


<div class="content" id="fullpage">
    <div class="box-img box-img1 section section1">
        <%--首页头--%>
        <jsp:include page="${ctx}/include/include-head.html"/>
       <%--     <div class="stars">

            </div>--%>
         <img src="/static/images/web/index/first_2.gif" alt="" class="img1"/>
        <div class="buy_1">
            <h1>炫彩多光极致美肤仪</h1>
            <h2>每天注入十五分钟光学能量，28天还原肌肤自然之美</h2>
            <div class="introduce1">
                <span>三色一体化灯珠</span>
                <i class="separate_a">丨</i>
                <span>7种美肤模式</span>
                <i class="separate_a">丨</i>
                <span>时间提醒</span>
                <i class="separate_a">丨</i>
                <span>呼吸式</span>
                <i class="separate_a">丨</i>
                <span>3种光波强度</span>

            </div>
            <a href="/product/1510726960726001.html" class="purchase1">立即购买</a>

            <div class="cont">
                <div class="t_img">
                    <img src="/static/images/web/img/33.png" alt="">
                   <%-- <img src="/static/images/web/img/1.png" alt="">
                    <img src="/static/images/web/img/2.png" alt="">
                    <img src="/static/images/web/img/3.png" alt="">
                    <img src="/static/images/web/img/4.png" alt="">
                    <img src="/static/images/web/img/5.png" alt="">
                    <img src="/static/images/web/img/6.png" alt="">
                    <img src="/static/images/web/img/7.png" alt="">
                    <img src="/static/images/web/img/8.png" alt="">
                    <img src="/static/images/web/img/9.png" alt="">
                    <img src="/static/images/web/img/10.png" alt="">
                    <img src="/static/images/web/img/11.png" alt="">
                    <img src="/static/images/web/img/12.png" alt="">
                    <img src="/static/images/web/img/13.png" alt="">
                    <img src="/static/images/web/img/14.png" alt="">
                    <img src="/static/images/web/img/15.png" alt="">
                    <img src="/static/images/web/img/16.png" alt="">
                    <img src="/static/images/web/img/17.png" alt="">
                    <img src="/static/images/web/img/18.png" alt="">
                    <img src="/static/images/web/img/19.png" alt="">
                    <img src="/static/images/web/img/20.png" alt="">
                    <img src="/static/images/web/img/21.png" alt="">
                    <img src="/static/images/web/img/22.png" alt="">
                    <img src="/static/images/web/img/23.png" alt="">
                    <img src="/static/images/web/img/24.png" alt="">
                    <img src="/static/images/web/img/25.png" alt="">
                    <img src="/static/images/web/img/26.png" alt="">
                    <img src="/static/images/web/img/27.png" alt="">
                    <img src="/static/images/web/img/28.png" alt="">
                    <img src="/static/images/web/img/29.png" alt="">
                    <img src="/static/images/web/img/30.png" alt="">
                    <img src="/static/images/web/img/31.png" alt="">
                    <img src="/static/images/web/img/32.png" alt="">
                    <img src="/static/images/web/img/33.png" alt="">
                    <img src="/static/images/web/img/34.png" alt="">
                    <img src="/static/images/web/img/35.png" alt="">
                    <img src="/static/images/web/img/36.png" alt="">
                    <img src="/static/images/web/img/37.png" alt="">
                    <img src="/static/images/web/img/38.png" alt="">
                    <img src="/static/images/web/img/39.png" alt="">
                    <img src="/static/images/web/img/40.png" alt="">
                    <img src="/static/images/web/img/41.png" alt="">
                    <img src="/static/images/web/img/42.png" alt="">
                    <img src="/static/images/web/img/43.png" alt="">
                    <img src="/static/images/web/img/44.png" alt="">
                    <img src="/static/images/web/img/45.png" alt="">
                    <img src="/static/images/web/img/46.png" alt="">
                    <img src="/static/images/web/img/47.png" alt="">
                    <img src="/static/images/web/img/48.png" alt="">
                    <img src="/static/images/web/img/49.png" alt="">
                    <img src="/static/images/web/img/50.png" alt="">
                    <img src="/static/images/web/img/51.png" alt="">
                    <img src="/static/images/web/img/52.png" alt="">
                    <img src="/static/images/web/img/53.png" alt="">
                    <img src="/static/images/web/img/54.png" alt="">
                    <img src="/static/images/web/img/55.png" alt="">
                    <img src="/static/images/web/img/56.png" alt="">
                    <img src="/static/images/web/img/57.png" alt="">
                    <img src="/static/images/web/img/58.png" alt="">
                    <img src="/static/images/web/img/59.png" alt="">
                    <img src="/static/images/web/img/60.png" alt="">
                    <img src="/static/images/web/img/61.png" alt="">
                    <img src="/static/images/web/img/62.png" alt="">
                    <img src="/static/images/web/img/63.png" alt="">
                    <img src="/static/images/web/img/64.png" alt="">
                    <img src="/static/images/web/img/65.png" alt="">
                    <img src="/static/images/web/img/66.png" alt="">
                    <img src="/static/images/web/img/67.png" alt="">
                    <img src="/static/images/web/img/68.png" alt="">
                    <img src="/static/images/web/img/69.png" alt="">
                    <img src="/static/images/web/img/70.png" alt="">
                    <img src="/static/images/web/img/71.png" alt="">
                    <img src="/static/images/web/img/72.png" alt="">
                    <img src="/static/images/web/img/73.png" alt="">--%>


                </div>
            </div>
        </div>

    </div>
    <div class="box-img box-img2 section section2">

        <%--<img src="/static/images/web/index/img_002.jpg" alt=" " class="img1"/>--%>
        <div class="video_box" >
       <%--     <video src="http://www.feesoul.com/static/images/video/feesoul.mp4" autoplay="autoplay" loop="loop"controls="controls" >your browser does not support the video tag</video>
 --%>           <video id="videoid" src="http://www.feesoul.com/static/images/video/feesoul.mp4"  type="video/mp4" width="100%"  height="atuo"></video>

        </div>
        <div class="title_3">
            <h4>科技-养肤</h4>
            <h4>美学-养心</h4>

        </div>
        <div class="title_4">
            <div class="slogan2">
                小巧机身尺寸，极简设计，更轻便舒适的使用体验<br/>超轻外壳150克，约三分之一瓶农夫山泉的重量<br/>出差、旅游，随身、随心
            </div>
            <ul>
                <li>
                    <img src="/static/images/web/index/icon7.png" alt=""/>
                    <span class="span_1">产品型号</span>
                    <span>FS100</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon8.png" alt=""/>
                    <span class="span_1">机身尺寸</span>
                    <span>180*60*50mm</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon9.png" alt=""/>
                    <span class="span_1">机身重量</span>
                    <span>150g</span>
                </li>
                <li>
                    <img src="static/images/web/index/icon10.png" alt=""/>
                    <span class="span_1">电池规格</span>
                    <span>3.7V/2200mAh</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon11.png" alt=""/>
                    <span class="span_1">照射距离</span>
                    <span>1-2cm</span>
                </li>
                <li>
                    <img src="static/images/web/index/icon12.png" alt=""/>
                    <span class="span_1">时间提示</span>
                    <span>每5分钟蜂鸣一次</span>
                </li>
            </ul>
        </div>
        <%--<div class="second_product">
            <img src="/static/images/web/index/second.png" alt="">
        </div>--%>

    </div>
    <div class="box-img box-img3 section section3">
        <img src="/static/images/web/index/img_003.jpg" alt=" " class="img1"/>
        <div class="introduce2">
            <h1>科技，让美变得简单</h1>
            <h4>光子面膜技术是由一名医生发明的，他受启发于美国宇航局以及美国海军的应用，发现光子不具有侵入性，<br/>而且为低级光脉冲，亮度高于太阳光三倍多。实验证明，光子可以提升皮肤细胞的潜在能量，直接作用于线<br/>粒体为每个细胞“充能”，而每种光源由于波长不同，也都有自己独特的作用。
            </h4>
            <div class="photo1">
                <img src="/static/images/web/index/img_003_1.png" alt="" class="img2"/>
                <div class="ring1">
                    <div class="wrap">
                        <div class="circle" id="circle"></div>
                        <div class="top"></div>
                        <div class="bottom"></div>
                        <div class="info">
                            杀菌、消炎、祛痘
                        </div>
                    </div>
                </div>
            </div>
            <div class="word_box">
                    <span>
                        <i class="bt bt1"></i>
                        <i class="size1">蓝光</i>
                    <i class="size2">(486nm)</i>
                </span>
                <span>
                    <i class="bt bt2"></i>
                    <i class="size1">红光</i>
                    <i class="size2">(631nm)</i>
                </span>
                <span>
                    <i class="bt bt3"></i>
                    <i class="size1">黄光</i>
                    <i class="size2">(594nm)</i>
                </span>
            </div>
        </div>
    </div>


    <div class="box-img box-img4 section section4">
        <img src="/static/images/web/index/img_004.jpg" alt=" " class="img1"/>
        <div class="title_2">
            <h4>医疗级一体化灯珠</h4>
            <div>
                <span>医疗器械标准，每一颗灯珠都经过精密分光、<br/>分色、色坐标检测；医疗器械工艺，精密灯珠<br/>排布，让每一束光子都精准、均匀的照射肌肤；<br/>三色一体化设计，化繁为简，无需手动更换，手柄<br/>操作即可切换光源。</span>
            </div>
        </div>
        <div class="light_box">
            <img src="" alt="">
        </div>
    </div>

    <div class="box-img box-img5 section section5">
        <img src="/static/images/web/index/img_005.jpg" alt=" " class="img1"/>
        <div class="title_5">
            <h4>技术，源于情怀</h4>
            <h6>采用先进的石墨烯水性涂层技术，与航天技术共用的轻型纳米科技<br/>
                石墨烯源自大自然，环保天然，为你的美，也为自然之美<br/>
                TA实用，更具bigger
            </h6>
        </div>
    </div>

    <div class="box-img box-img6 section section6">

        <div class="title_1">
            <h3>时间提示功能</h3>
            <h6>每五分钟提示，每天使用十五分钟<br/>——背后是科研团队数万份实验数据，<br/>只为你把握最佳美容时间。</h6>
        </div>
        <div class="fm_box">
            <img src="/static/images/web/index/fm1.png" alt="">
            <div class="fm_signal">
                <img src="" alt="">
            </div>
        </div>
    </div>

    <div class="box-img box-img7 section section7">
        <img src="/static/images/web/index/img_007.jpg" alt=" " class="img1"/>
        <div class="title_1">
            <h3>内置多种肌肤美肤组合模式</h3>
            <h6>一按，一照，一杯花茶的时间，TA已经帮你解决了所有问题</h6>
        </div>
    </div>

    <div class="box-img box-img8 section section8">
        <img src="/static/images/web/index/img_008.jpg" alt=" " class="img1"/>
        <div class="title_8">
            <h3>安全，不允许99%</h3>
            <h4>技术与工艺均经由多项专业机构的权威认证</h4>
            <h6>
                每次启动，电流将经过防高低温爆死金丝导线，0.01秒内均匀开启相应模式的每一颗医疗级灯珠；<br/>
                每个按键按压测试超五万次无损坏，人体工学机身加石墨烯涂层，每一次精益求精，只为安全更安心
            </h6>
        </div>
        <div class="title_8_2">
            <span><img src="/static/images/web/index/no_1.png" alt=""></span>
            <span><img src="/static/images/web/index/no_2.png" alt=""></span>
            <span><img src="/static/images/web/index/no_3.png" alt=""></span>
            <span><img src="/static/images/web/index/no_4.png" alt=""></span>
        </div>
    </div>

    <div class="box-img box-img9 section section9">
        <img src="/static/images/web/index/img_009_1.png" alt=" " class="img1"/>
        <div class="title_1">
            <h3>炫彩多光极致美肤仪</h3>
            <h6>全身任何地方均可使用</h6>
        </div>
        <div class="icon_box1">
            <ul>
                <li>
                    <img src="/static/images/web/index/icon1.png" alt=""/>
                    <span>脸部</span>
                </li>

                <li>
                    <img src="/static/images/web/index/icon2.png" alt=""/>
                    <span>颈部</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon3.png" alt=""/>
                    <span>胸部</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon4.png" alt=""/>
                    <span>臀部</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon5.png" alt=""/>
                    <span>腿部</span>
                </li>
                <li>
                    <img src="/static/images/web/index/icon6.png" alt=""/>
                    <span>背部</span>
                </li>
            </ul>


            <a href="/product/1510726960726001.html" class="purchase1">立即购买</a>
        </div>

        <div class="icon_box2">
            <img src="/static/images/web/index/img_009_2.png" alt="">
        </div>
    </div>
    <div class="box-img box-img9 section section9">
        <img src="/static/images/web/index/copyrite.jpg" alt=" " class="img1"/>
    </div>
</div>


<script>





</script>

</body>
</html>
<script type="text/javascript" src="/static/js/web/index/stopExecutionOnTimeout.js"></script>